/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/

// 封装渲染列表函数
const renderData = () => {
  // ajax发送get请求
  axios({
    method: 'get',
    url: '/student/list',
  }).then(res => {
    // 响应请求
    console.log(res)
    // 渲染列表
    document.querySelector('tbody').innerHTML = res.data.data.map(item => `
        <tr>
          <th scope="row">${item.id}</th>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.sex}</td>
          <td>${item.group}</td>
          <td>${item.phone}</td>
          <td>${item.salary}</td>
          <td>${item.truesalary}</td>
          <td>${item.province + item.city + item.county}</td>
          <td>
            <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">  修改</button>
            <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删  除</button>
          </td>
        </tr>
        `).join('')
  })

}

// 渲染列表
renderData()

// 封装省列表
const getProvince = () => {
  // ajax发送get请求
  axios({
    method: 'get',
    url: '/geo/province',
  }).then(res => {
    // 响应请求
    console.log(res)
    // 渲染省列表
    document.querySelector('[name="province"]').innerHTML = `<option selected value="">--省--</option>` + res.data.map(item => `
        <option value="${item}">${item}</option>
        `).join('')
  })
}

// 添加学员
document.querySelector('.btnAddStu').addEventListener('click', function () {
  // 弹出模态框
  $('#addModal').modal('show')   // 表单重置功能模态框自带
  document.querySelector('.addModalLabel').innerHTML = '录入新学员'
  document.querySelector('.btnAddStudent').innerHTML = '确认添加'
  document.querySelector('form').reset()
  // 加载省列表
  getProvince()
})

// 省改变事件
document.querySelector('[name="province"]').addEventListener('change', function () {
  // 如果省发生了变化 那么市和县就要回到初始状态
  document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>`
  document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
  // ajax发送get请求
  axios({
    method: 'get',
    url: '/geo/city',
    params: { pname: this.value }
  }).then(res => {
    // 响应请求
    console.log(res)
    // 渲染市列表
    document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>` + res.data.map(item => `
        <option value="${item}">${item}</option>
        `).join('')
  })
})

// 市改变事件
document.querySelector('[name="city"]').addEventListener('change', function () {
  // 如果市发生了变化 那么县就要回到初始状态
  document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
  // ajax发送get请求
  axios({
    method: 'get',
    url: '/geo/county',
    params: {
      pname: document.querySelector('[name="province"]').value,
      cname: this.value
    }
  }).then(res => {
    // 响应请求
    console.log(res)
    // 渲染县列表
    document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>` + res.data.map(item => `
        <option value="${item}">${item}</option>
        `).join('')
  })
})

// 添加学员
document.querySelector('[type="submit"]').addEventListener('click', function (e) {
  // 阻止默认跳转
  e.preventDefault()
  // 获取表单数据(用FormData以下方法可以自动获取form表单中所有带name属性的标签的内容(value,name),文件上传中的方法是手动获取)
  const fd = new FormData(document.querySelector('form'))
  // 使用FormData在ajax发送请求的时候如果没有文件要上传的话会报错 所以这里需要声明一个空对象来存放获取的数据
  let data = {}
  fd.forEach((item, index) => {
    data[index] = item
  })
  // 非空判断
  if (Object.values(data).some(item => item == '')) {
    return Toast.fail('输入不可为空 请重新输入')
  }
  // 声明变量存放ajax请求报文
  let config = {}
  // 判断是添加学员还是修改学员信息
  if (document.querySelector('.btnAddStudent').innerHTML === '确认添加') {
    config = {
      method: 'post',
      url: '/student/add',
      data: data
    }
  } else {
    config = {
      method: 'put',
      url: '/student/update',
      data: {
        ...data,
        id: this.dataset.id
      }
    }
  }
  // ajax发送post请求
  axios(config).then(res => {
    // 响应请求
    console.log(res)
    if (res.data.code === 0) {
      Toast.success(res.data.message)
      // 刷新列表
      renderData()
      // 模态框消失
      $('#addModal').modal('hide')
    }
  }).catch(err => {
    Toast.fail(err.response.data.message)
  })
})

// 删除学员
document.querySelector('tbody').addEventListener('click', function (e) {
  // 点击的是删除按钮
  if (e.target.classList.contains('btn-danger')) {
    // ajax发送get请求
    axios({
      method: 'delete',
      url: '/student/delete',
      params: { id: e.target.dataset.id }
    }).then(res => {
      // 响应请求
      console.log(res)
      if (res.data.code === 0) {
        Toast.success('删除成功')
        // 刷新列表
        renderData()
      }
    }).catch(err => {
      Toast.fail(err.response.data.message)
    })
  }
})

// 修改学员信息(复用添加学员的模态框)
document.querySelector('tbody').addEventListener('click', function (e) {
  // 点击修改按钮
  if (e.target.classList.contains('btn-primary')) {
    // 弹出模态框
    $('#addModal').modal('show')
    document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
    document.querySelector('.btnAddStudent').innerHTML = '确认修改'
    // 加载省列表
    getProvince()
    // ajax发送get请求学员信息
    axios({
      method: 'get',
      url: '/student/one',
      params: { id: e.target.dataset.id }
    }).then(res => {
      // 响应请求
      console.log(res)
      // 将返回的信息渲染到列表
      document.querySelector('[name="name"]').value = res.data.data.name
      document.querySelector('[name="age"]').value = res.data.data.age
      document.querySelector('[name="group"]').value = res.data.data.group
      res.data.data.sex === '男' ? document.querySelectorAll('[name="sex"]')[0].checked = true : document.querySelectorAll('[name="sex"]')[1].checked = true
      document.querySelector('[name="phone"]').value = res.data.data.phone
      document.querySelector('[name="salary"]').value = res.data.data.salary
      document.querySelector('[name="truesalary"]').value = res.data.data.truesalary
      document.querySelector('[name="province"]').value = res.data.data.province
      document.querySelector('[name="city"]').innerHTML = `<option selected value="${res.data.data.city}">${res.data.data.city}</option>`
      document.querySelector('[name="county"]').innerHTML = `<option selected value="${res.data.data.county}">${res.data.data.county}</option>`
      // 给确认按钮添加id
      document.querySelector('.btnAddStudent').dataset.id = e.target.dataset.id
    })
  }
})